<template>
	<view>
		<view class="header">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in images" :key="index">
					<image :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<view class="grid-item" @tap="getToNavgate(it.name)" v-for="(it,index) in nav" :key="index">
				<!-- <text :class="`iconfont icon-` + it.icon" :style="'color:'+ it. iconColor"></text> -->
				<!-- 2025-11-10 `iconfont ${ it.icon }`符号模板语句写法等同于 `iconfont icon-`+ it.icon -->
				<text :class="`iconfont ${ it.icon }`" :style="'color:'+ it. iconColor"></text>
				<view>{{it.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				images: [
					"/static/images/1.jpg",
					"/static/images/2.jpg",
					"/static/images/3.jpg"
				],
				nav: [{
						icon: "meishi", // 响应式数据渲染到属性中，属性原本还有非变量的文本  将非变量文本，用``把文本内容包裹起来 然后+上变量
						text: "美食",
						name: "food",
						iconColor: ""
					},
					{
						icon: "zhuangxiu",
						text: "装修",
						name: "zhuangxiu",
						iconColor: ""
					},
					{
						icon: "xiyu",
						text: "洗浴",
						name: "xiyu",
						iconColor: ""
					},
					{
						icon: "qiche",
						text: "汽车",
						name: "car",
						iconColor: ""
					},
					{
						icon: "changge",
						text: "唱歌",
						name: "sing",
						iconColor: ""
					},
					{
						icon: "zhusu",
						text: "住宿",
						name: "zhusu",
						iconColor: ""
					},
					{
						icon: "boshimao",
						text: "学习",
						name: "study",
						iconColor: ""
					},
					{
						icon: "shiwu-gongwenbao",
						text: "工作",
						name: "work",
						iconColor: ""
					},
					{
						icon: "jiehunchoubei",
						text: "结婚",
						name: "marry",
						iconColor: ""
					}
				],
				reqData: []
			};
		},
		// 不需要前台样式文件，需要动态加载数据时编写的文件，如果要写的话第11行代码需要由nav改成navs
		// computed: {
		// 	navs() {
		// 		return this.reqData.map((item, i)=> {
		// 			return {
		// 				...item,
		// 				icon: this.nav[i]?.icon
		// 			}
		// 		})
		// 	}
		// },
		methods: {
			getToNavgate(name) {
				uni.navigateTo({
					url: `/pages/${name}/${name}`
				})
			},
			randomColor() {
				// 随机生成色相
				var hue = Math.floor(Math.random() * 360);

				// 固定饱和度和亮度
				var saturation = 50; // 可以根据需要调整
				var lightness = 50; // 可以根据需要调整

				// 将 HSL 色彩值转换为 RGB 色彩值
				var hslColor = 'hsl(' + hue + ',' + saturation + '%,' + lightness + '%)';
				return hslColor
			}
		},
		onLoad() {
			let that = this
			// 在每一次加载的时候，请求一下接口，获取当前的导航列表
			uni.request({
				// url:'https://m1.apifoxmock.com/m1/5205229-0-default/navs',
					url:'https://apifoxmock.com/m1/5205229-0-default/navs',
					data:{},
					success(res){// 当访问接口成功的时候，可以获得响应，表示请求成功。
						if(res.data.code == 1){
							that.reqData=res.data.data;
							for(const i in that.reqData){
								that.reqData[i].iconColor=that.randomColor();
							}
							that.nav = that.reqData;
						}else{
							 // alert("请求失败");
							 alert(res.data.message);
						}
					},
					fail(){
						alert("请求失败")
					}
			})
			
		}
	}
</script>

<style lang="scss">
	@import "/static/iconfont1/iconfont.css";

	swiper {
		width: 750rpx;
		height: 400rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* 定义三列，每列占据等宽空间 */
		grid-template-rows: repeat(3, 1fr);
		/* 定义三行，每行占据等高空间 */
		gap: 1rpx;
		/* 网格间距 */
		padding: 1rpx;
	}

	.grid-item {
		background-color: #fff;
		/* 单元格背景色 */
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		height: 100px;
		/* 你可以根据需要调整高度 */
		border: 1rpx solid rgb(219, 219, 219);
	}

	.iconfont {
		box-sizing: border-box;
		padding: 30rpx 24rpx;
		display: block;
		font-size: 72rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
</style>